<template>
  <div class="credential">
    <el-row>
      <!-- 头部2，创建按钮 及搜索框 -->
      <el-col :span="24">
        <el-card class="credential-head-card" shadow="never" :body-style="{padding:'10px'}">
          <!-- float属性，会将多个同级标签放在同一行 -->
          <div style="float: left;margin-right:10px;">
            <el-button  size="small" type="primary" icon="Edit"  @click="createcredentialDrawer = true">创建</el-button>
          </div>
          <div>
            <el-input class="credential-head-search" size="small" clearable placeholder="请输入" v-model='searchValue'></el-input>
            <el-button size="small" type="primary" plain icon="Edit" @click="getcredentials()">搜索</el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <div>
          <el-card class="credential-body-card" shadow="never" :body-style="{padding:'5px'}">
            <el-table
                style="width:100%;font-size:12px;margin-bottom:10px;"
                :data="credentialList"
                v-loading="appLoading">
              <el-table-column width="20"></el-table-column>
              <el-table-column align=left label="凭据名称">
                <template v-slot="scope">
                  <p class="credential-body-credentialname">{{ scope.row.name }}</p>
                </template>
              </el-table-column>
              <el-table-column align=center min-width="100" label="用户名">
                <template v-slot="scope">
                  <el-tag type="info">{{ scope.row.user }} </el-tag>
                </template>
              </el-table-column>
              <el-table-column align=center label="操作" min-width="120">
                <template v-slot="scope">
                  <el-button size="small" style="border-radius:2px;" icon="Edit" type="primary" plain @click="updata_data(scope,updatacredentialFunc)">修改</el-button>
                  <el-button size="small" icon="Edit" type="danger" plain @click="handleConfirm(scope, '删除', delcredential)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                class="credential-body-pagination"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pagesizeList"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :prev-click="getcredentials"
                :total="credentialTotal">
            </el-pagination>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 创建 -->
    <el-drawer
        v-model="createcredentialDrawer"
        direction="rtl"
        :before-close="handleClose"
        title="创建凭据">
      <template #default>
        <!-- flex布局,居中 -->
        <el-row type="flex" justify="center">
          <el-col :span="20">
            <!-- ref绑定控件后，js中才能用this.$ref获取该控件 -->
            <!-- rules 定义form表单校验规则 -->
            <el-form ref="createcredentialData" :rules="createcredentialRules" :model="createcredentialData" label-width="80px">
              <!-- prop用于rules中的校验规则的key -->
              <el-form-item class="deploy-create-form" label="凭据名称" prop="name">
                <el-input v-model="createcredentialData.name"></el-input>
              </el-form-item>
              <el-form-item class="deploy-create-form" label="用户名" prop="user">
                <el-input v-model="createcredentialData.user"></el-input>
              </el-form-item>
              <el-form-item class="deploy-create-form" label="密码" prop="password">
                <el-input v-model="createcredentialData.password"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </template>
      <!-- 插槽，抽屉footer -->
      <template #footer>
        <!-- 点击后赋值false，隐藏抽屉 -->
        <el-button @click="createcredentialDrawer=false">取消</el-button>
        <el-button type="primary" @click="submitForm('createcredentialData')">立即创建</el-button>
      </template>
    </el-drawer>

    <!-- 修改 -->
    <el-drawer
        v-model="updataserverDrawer"
        direction="rtl"
        :before-close="handleClose"
        title="修改凭据">
      <template #default>
        <!-- flex布局,居中 -->
        <el-row type="flex" justify="center">
          <el-col :span="20">
            <!-- ref绑定控件后，js中才能用this.$ref获取该控件 -->
            <!-- rules 定义form表单校验规则 -->
            <el-form ref="updatecredentialData"  :model="updatecredentialData" label-width="80px">
              <!-- prop用于rules中的校验规则的key -->
              <el-form-item class="deploy-create-form" label="凭据名称" prop="name">
                <el-input v-model="updatecredentialData.params.name"></el-input>
              </el-form-item>
              <el-form-item class="deploy-create-form" label="用户名" prop="user">
                <el-input v-model="updatecredentialData.params.user"></el-input>
              </el-form-item>
              <el-form-item class="deploy-create-form" label="密码" prop="password">
                <el-input v-model="updatecredentialData.params.password"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </template>
      <!-- 插槽，抽屉footer -->
      <template #footer>
        <!-- 点击后赋值false，隐藏抽屉 -->
        <el-button @click="updataserverDrawer=false">取消</el-button>
        <el-button type="primary" @click="updatacredentialFunc()">更新</el-button>
      </template>
    </el-drawer>



  </div>
</template>

<script>
import common from "../../common/Config";
import httpClient from '@/request';
export default {
  data() {
    return {
      //编辑器配置
      cmOptions: common.cmOptions,
      contentYaml: '',
      //分页
      currentPage: 1,
      pagesize: 10,
      pagesizeList: [10, 20, 30],

      //查询
      searchValue: '',
      appLoading: false,
      credentialList: [],
      credentialTotal: 0,
      getcredentialsData: {
        url: common.credentialList,
        params: {
          name: '',
          user: '',
          password: '',
          limit: '',
        }
      },
      //新增
      createcredentialDrawer: false,
      createcredentialData: {
        url: common.credentialAdd,
        name: '',
        user: '',
        password:'',
      },
      //创建credential的表单校验规则
      createcredentialRules: {
        name: [{
          required: true,
          message: '请填写凭据名称',
          trigger: 'change'
        }],
        user: [{
          required: true,
          message: '请填写用户名',
          trigger: 'change'
        }],
        password: [{
          required: true,
          message: '请填写密码',
          trigger: 'change'
        }],
      },


      //serverlist
      serverListUrl: common.serverList,
      serverList: [],

      //详情
      credentialDetail: {},
      getcredentialDetailData: {
        url: common.credentialDetail,
        params: {
          name:'',
          user:'',
          password:'',
        }
      },
      //更新
      updataserverDrawer: false,
      updatecredentialData: {
        url: common.credentialUpdate,
        params: {
          id:'',
          name:'',
          user:'',
          password:'',
        }
      },
      //删除
      delcredentialData: {
        url: common.credentialDelete,
        params: {
          id:'',
          name: '',
        }
      }
    }
  },
  methods: {
    //创建
    createcredentialFunc() {
      //赋值
      console.log(this.createcredentialData)
      httpClient.post(this.createcredentialData.url, this.createcredentialData)

          .then(res => {
            this.$message.success({
              message: res.msg
            })
            //this.resetForm('createcredentialData')
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
          .finally(() => {
            this.getcredentials()
            this.createcredentialDrawer = false
            this.appLoading = false
          })
    },
    //提交表单，验证数据
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.createcredentialFunc()
        } else {
          return false
        }
      })
    },

    //更新
    updata_data(e) {
      this.updataserverDrawer = true
      //赋值
      this.updatecredentialData.params.id= e.row.id
    },
    updatacredentialFunc() {
      console.log(this.updatecredentialData)
      httpClient.put(this.updatecredentialData.url, this.updatecredentialData.params)
          .then(res => {
            this.$message.success({
              message: res.msg
            })
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
          .finally(() => {
            this.getcredentials()
            this.updataserverDrawer = false
            this.appLoading = false
          })
    },

    getcredentials() {
      this.appLoading = true
      this.getcredentialsData.params.name = this.searchValue
      this.getcredentialsData.params.page = this.currentPage
      this.getcredentialsData.params.limit = this.pagesize
      httpClient.get(this.getcredentialsData.url, {params: this.getcredentialsData.params})
          .then(res => {
            this.credentialList = res.data
            this.credentialTotal = res.data.total
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
      this.appLoading = false
    },

    delcredential(e) {
      console.log(e.row.id)
      this.delcredentialData.params.id = e.row.id
      httpClient.delete(this.delcredentialData.url, {data: this.delcredentialData.params})
          .then(res => {
            this.getcredentials()
            this.$message.success({
              message: res.msg
            })
          })
          .catch(res => {
            this.$message.error({
              message: res.msg
            })
          })
    },

    //分页属性
    handleSizeChange(size) {
      this.pagesize = size;
      this.getcredentials()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getcredentials()
    },
    //选择判断
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
    },


    handleConfirm(obj, operateName, fn) {
      this.confirmContent = '确认继续 ' + operateName + ' 操作吗？'
      this.$confirm(this.confirmContent,'提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
          .then(() => {
            fn(obj)
          })
          .catch(() => {
            this.$message.info({
              message: '已取消操作'
            })
          })
    },
  },


  // beforeMount() {
  mounted() {
    this.getcredentials()
  }
}
</script>


<style scoped>
.credential-head-card,.credential-body-card {
  border-radius: 1px;
  margin-bottom: 5px;
}
.credential-head-search {
  width:160px;
  margin-right:10px;
}
.credential-body-credentialname {
  margin: 0px;
  color: #4795EE;
}
.credential-body-ip {
  margin: 0px;
  color: rgb(145, 145, 145);
}
.credential-body-credentialname:hover {
  color: rgb(84, 138, 238);
  cursor: pointer;
  font-weight: bold;
}
</style>